<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/zytop.css" />
		<link rel="stylesheet" type="text/css" href="css/zyfooter.css" />
		<link rel="stylesheet" type="text/css" href="Hui-iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/gouwuche.css" />
		<style type="text/css">
			.qglist {
				display: none;
			}
			
			.qgtitle:hover .qglist {
				display: block;
			}
			/*头部样式*/
			
			#qg {
				border-bottom: 2px solid black;
			}
			
			#myorder {
				margin-top: 20px;
			}
		</style>
	</head>

	<body>
		<div id="qg">
			<div id="index_topbar">
				<div class="content">
					<p class="welcome">欢迎来到黑科技</p>
					<div class="menu">
						<a target="_blank" href="#" class="item">帮助中心</a>
						<span class="divi">|</span>
						<a href="#" class="item">我的订单</a>
						<span class="divi">|</span>
						<a href="#" class="item">在线客服</a>
						<span class="divi">|</span>
						<a target="_blank" href="" class="item">APP下载</a>
						<span class="divi">|</span>
						<a target="_blank" href="" class="item">校园招聘</a>
					</div>
					<div class="login">
						<a href="#" class="link">登录</a>
						<span class="divi">|</span>
						<a href="#" class="link">注册</a>
					</div>
				</div>
			</div>
			<!--top结束-->
			<div id="index_header">
				<a class="logo" href="#">
					<img src="img/zhuye/logo.jpg" />
				</a>
				<a class="slogan" href="#">
					<img src="img/zhuye/slogan1.png" />
				</a>
				<div id="searchbar">
					<span class="name">热门搜索:</span>
					<a href="" class="item">小米</a>
					<div style="clear: both;"></div>
					<div class="searchinput">
						<input type="text" id="input" value="iphone6s 32GB" />
						<a href="#" id="btn">搜索</a>
					</div>
					<div style="clear: both;"></div>
					<a href="" class="item">红米4</a>
					<a href="" class="item">红米4A</a>
					<a href="" class="item">三星s7edge</a>
					<a href="" class="item">苹果7</a>
				</div>
			</div>
			<!--searchbar结束-->
			<div id="index_menu">
				<h2 class="title qgtitle">全部商品分类
					<ul class="list qglist">
					<li>
						<h2 class="phone1">手机专区</h2>
				<div class="phonelist">
					<p>
						<a href="">华为</a>
						<a href="">苹果</a>
						<a href="">三星</a>
						<a href="">oppo</a>
					</p>
					<p>
						<a href="">vivo</a>
						<a href="">荣耀</a>
						<a href="">魅族</a>
						<a href="">小米</a>
					</p>
				</div>
				<div class="box">
					<div style="overflow: hidden;">
						<a target="_blank" href="" class="item">苹果 iPhone 7</a>
						<a target="_blank" href="" class="item">苹果 iPhone 7plus</a>
						<a target="_blank" href="" class="item">苹果 iPhone 6s</a>
					</div>
					<ul>
						<li>
							<p class="kind">特色手机</p>
							<div class="nav">
								<a href="">精品推荐</a>
								<a href="">最新机型</a>
								<a href="">热销千元</a>
								<a href="">双卡双待</a>
								<a href="">个性潮机</a>
								<a href="">老人最爱</a>
							</div>
						</li>
						<div style="clear: both;"></div>
						<li>
							<p class="kind">价格区间</p>
							<div class="nav">
								<a href="">1-499</a>
								<a href="">500-999</a>
								<a href="">1000-1999</a>
								<a href="">2000-2999</a>
								<a href="">3000-3999</a>
								<a href="">4000-4999</a>
								<a href="">5000以上</a>
							</div>
						</li>
						<div style="clear: both;"></div>
						<li>
							<p class="kind">网络制式</p>
							<div class="nav">
								<a href="">4G全网通</a>
								<a href="">移动联通双4G</a>
								<a href="">移动4G</a>
								<a href="">联通4G</a>
								<a href="">电信4G</a>
								<a href="">电信3G</a>
								<a href="">2G（移动2G/联通2G）</a>
							</div>
						</li>
					</ul>
				</div>
				</li>
				<li>
					<h2 class="phone2">智能专区</h2>
					<div class="phonelist">
						<p>
							<a href="">智能手表</a>
							<a href="">智能手环</a>
							<a href="">智能眼镜</a>
						</p>
						<p>
							<a href="">智能机器人</a>
							<a href="">无人机</a>
							<a href="">投影仪</a>
						</p>
					</div>
					<div class="box">
						<div style="overflow: hidden;">
							<a target="_blank" href="" class="item">苹果 iPhone 7</a>
							<a target="_blank" href="" class="item">苹果 iPhone 7plus</a>
							<a target="_blank" href="" class="item">苹果 iPhone 6s</a>
						</div>
						<ul>
							<li>
								<p class="kind">智能手表</p>
								<div class="nav">
									<a href="">华为</a>
									<a href="">小米</a>
									<a href="">唯动</a>
									<a href="">乐心</a>
									<a href="">幻响</a>
								</div>
							</li>
							<div style="clear: both;"></div>
							<li>
								<p class="kind">智能手环</p>
								<div class="nav">
									<a href="">华为</a>
									<a href="">摩托罗拉</a>
									<a href="">小天才</a>
									<a href="">三星</a>
									<a href="">一米</a>
									<a href="">葫芦娃</a>
									<a href="">ticwatch</a>
								</div>
							</li>
							<div style="clear: both;"></div>
							<li>
								<p class="kind">vr眼镜</p>
								<div class="nav">
									<a href="">幻影</a>
									<a href="">暴风魔镜</a>
								</div>
							</li>
							<div style="clear: both;"></div>
							<li>
								<p class="kind">智能机器人</p>
								<div class="nav">
									<a href="">小鱼在家</a>
									<a href="">爱乐优</a>
									<a href="">阿尔法</a>
								</div>
							</li>
							<div style="clear: both;"></div>
							<li>
								<p class="kind">无人机</p>
								<div class="nav">
									<a href="">拍若特</a>
								</div>
							</li>
						</ul>
					</div>
				</li>
				<!---->
				<li>
					<h2 class="phone3">手机配件</h2>
					<div class="phonelist">
						<p>
							<a href="">贴膜</a>
							<a href="">保护套</a>
							<a href="">电源</a>
							<a href="">充电器</a>
						</p>
						<p>
							<a href="">数据线</a>
							<a href="">蓝牙耳机</a>
							<a href="">手机耳机</a>
						</p>
					</div>
					<div class="box">
						<div style="overflow: hidden;">
							<a target="_blank" href="" class="item">苹果 iPhone 7</a>
							<a target="_blank" href="" class="item">苹果 iPhone 7plus</a>
							<a target="_blank" href="" class="item">苹果 iPhone 6s</a>
						</div>
						<ul>
							<li>
								<p class="kind">熱搜配件</p>
								<div class="nav">
									<a href="">保护套</a>
									<a href="">移动电源</a>
									<a href="">钢化膜</a>
									<a href="">耳机</a>
									<a href="">数据线</a>
									<a href="">内存卡</a>
								</div>
							</li>
							<div style="clear: both;"></div>
							<li>
								<p class="kind">保护类</p>
								<div class="nav">
									<a href="">手机壳</a>
									<a href="">手机贴膜</a>
								</div>
							</li>
							<div style="clear: both;"></div>
							<li>
								<p class="kind">电源类</p>
								<div class="nav">
									<a href="">充电线</a>
									<a href="">充电宝</a>
									<a href="">车充</a>
								</div>
							</li>
							<li>
								<p class="kind">音频类</p>
								<div class="nav">
									<a href="">蓝牙耳机</a>
									<a href="">运动耳机</a>
									<a href="">入耳耳机</a>
									<a href="">小米耳机</a>
									<a href="">华为耳机</a>
									<a href="">无线蓝牙耳机</a>
									<a href="">音响</a>
								</div>
							</li>
							<li>
								<p class="kind">品牌推荐</p>
								<div class="nav">
									<a href="">品胜</a>
									<a href="">小米</a>
									<a href="">闪迪</a>
									<a href="">飞毛腿</a>
									<a href="">三星</a>
									<a href="">洛克</a>
								</div>
							</li>
						</ul>
					</div>
				</li>
				<li>
					<h2 class="phone4">平板专区</h2>
					<div class="phonelist">
						<p>
							<a href="">华为</a>
							<a href="">苹果</a>
							<a href="">三星</a>
							<a href="">小米</a>
						</p>
					</div>
					<div class="box">
						<div style="overflow: hidden;">
							<a target="_blank" href="" class="item">苹果 iPhone 7</a>
							<a target="_blank" href="" class="item">苹果 iPhone 7plus</a>
							<a target="_blank" href="" class="item">苹果 iPhone 6s</a>
						</div>
						<ul>
							<li>
								<p class="kind">热门品牌</p>
								<div class="nav">
									<a href="">苹果</a>
									<a href="">小米</a>
									<a href="">三星</a>
									<a href="">华为</a>
								</div>
							</li>
							<div style="clear: both;"></div>
							<li>
								<p class="kind">价格区间</p>
								<div class="nav">
									<a href="">3000-3999</a>
									<a href="">4000-4999</a>
									<a href="">5000以上</a>
								</div>
							</li>
							<div style="clear: both;"></div>
							<li>
								<p class="kind">搜索热门</p>
								<div class="nav">
									<a href="">苹果 ipad pro</a>
									<a href="">苹果 ipad pro2</a>
									<a href="">苹果ipad mini</a>
								</div>
							</li>
						</ul>
					</div>
				</li>
				</ul>
				</h2>
				<ul class="menu">
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="dmhshop.html">手机商城</a>
					</li>
					<li>
						<a href="peijianzhongxing.html">配件专区</a>
					</li>
					<li>
						<a href="zy_shangpin.html">黑科技</a>
					</li>
					<li>
						<a href="qianggou.html">限时抢购</a>
					</li>
					<li>
						<a href="zy_help.html">帮助中心</a>
					</li>
				</ul>
				<div style="clear: both;"></div>

			</div>
		</div>
		<div id="myorder">

			<div class="bord_bott">
				<span class="allshop">
						全部商品
					</span>
			</div>
			<div class="shop_nav">
				<span><input type="checkbox" class="quanxuan" /> 全选</span><span>商品信息</span><span>单价(元)</span><span>数量</span><span>金额(元)</span><span>操作</span>
			</div>
			<div id="gouwuche">
			</div>
			<div class="shop_bott mt20 mb10">
				<span><input type="checkbox" class="quanxuan"/> 全选</span>
				<span class="deleteChecked">删除选中商品</span>
				<p>
					已选
					<span id="count">0</span> 件商品，总价
					<span id="total">price</span>
					<input type="button" class="f16 fb" id="jiesuan" value="结算" />
				</p>
			</div>

		</div>
		<!--尾部-->
		<div class="footer">
			<div class="footer_div1">
				<div class="footer_div1_top">
					<a href="javascript:;"><img src="img/footer/fuwu01.jpg" width="256" height="97" class="_top_a" /></a>
					<a href="javascript:;"><img src="img/footer/fuwu02.jpg" width="214" height="97" class="_top_a" /></a>
					<a href="javascript:;"><img src="img/footer/fuwu03.jpg" width="205" height="97" class="_top_a" /></a>
					<a href="javascript:;"><img src="img/footer/fuwu04.jpg" width="254" height="97" class="_top_a" /></a>
					<a href="javascript:;"><img src="img/footer/fuwu05.jpg" width="237" height="97" class="_top_a" /></a>
				</div>
				<div class="clear"></div>
				<div class="footer_div1_bottom">
					<dl class="footer_div1_bottom_left">
						<dt>购物指南</dt>
						<dd>
							<a href="javascript:;">购物流程</a>
						</dd>
						<dd>
							<a href="javascript:;">会员介绍</a>
						</dd>
						<dd>
							<a href="javascript:;">常见问题</a>
						</dd>
						<dd>
							<a href="javascript:;">联系客服</a>
						</dd>
					</dl>
					<dl class="footer_div1_bottom_left">
						<dt>支付方式</dt>
						<dd>
							<a href="javascript:;">快捷支付</a>
						</dd>
						<dd>
							<a href="javascript:;">分期付款</a>
						</dd>
						<dd>
							<a href="javascript:;">货到付款</a>
						</dd>
						<dd>
							<a href="javascript:;">门店支付</a>
						</dd>
					</dl>
					<dl class="footer_div1_bottom_left">
						<dt>物流配送</dt>
						<dd>
							<a href="javascript:;">到店自提</a>
						</dd>
						<dd>
							<a href="javascript:;">送货上门</a>
						</dd>
						<dd>
							<a href="javascript:;">物流查询</a>
						</dd>
					</dl>
					<dl class="footer_div1_bottom_left">
						<dt>售后服务</dt>
						<dd>
							<a href="javascript:;">退换货流程</a>
						</dd>
						<dd>
							<a href="javascript:;">退款说明</a>
						</dd>
						<dd>
							<a href="javascript:;">退换货申请</a>
						</dd>
						<dd>
							<a href="javascript:;">预约维修</a>
						</dd>
					</dl>
					<dl class="footer_div1_bottom_left">
						<dt>心服务</dt>
						<dd>
							<a href="javascript:;">投诉奖励</a>
						</dd>
						<dd>
							<a href="javascript:;">交通补助</a>
						</dd>
						<dd>
							<a href="javascript:;">十大免费</a>
						</dd>
					</dl>
					<div class="footer_div1_bottom_right">
						<div class="footer_div1_bottom_right_img"><img src="../img/quanguomendian_icon.png" /></div>
						<strong id="footer_str_strong">身边黑科技</strong>
						<p id="p_p1">全国300个城市3000家门店为您提供最贴心的服务！</p>
						<div id="btn_n1"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<div id="footer_last">
				<div class="footer_div2">
					<div id="footer_div2_top">
						<ul id="footer_div2_ul">
							<li>
								<a href="javascript:;">关于我们</a>
							</li>
							<li>
								<a href="javascript:;">联系我们</a>
							</li>
							<li>
								<a href="javascript:;">品牌专区</a>
							</li>
							<li>
								<a href="javascript:;">友情链接</a>
							</li>
							<li>
								<a href="javascript:;">迪粉社区</a>
							</li>
							<li id="lis">
								<a href="javascript:;">投诉建议</a>
							</li>
						</ul>
						<div class="clear"></div>
						<p>全国服务热线：400-700-8800 </p>
						<p>商务合作: jiaxiao@dixintong.com</p>
						<p id="last_p">Powered by DiXinTong©2001-2015京ICP备11010605号©2001-2015 DiXinTong Inc. 北京黑科技商贸股份有限公司</p>
					</div>
					<div id="erweima">
						<div id="ewm-z">
						</div>
						<div id="ewm_y">
							<p class="p1">黑科技客户端</p>
							<p class="p2">移动生活，私人订制</p>
							<div id="btn_n2">APP下载</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var currentUser;
			$(function() {
				init();
				currentUser = AV.User.current(); //判断用户是否登录
				panduan()
				if(currentUser) {
					updateCart()
				} else {
					location.href = "zy_login.html?RetUrl=" + getPageUrl()
				}
			})

			function updateCart() {
				var query = new AV.Query('Cart');
				var username = currentUser.attributes.username
				query.equalTo("username", username)
				query.find().then(function(products) {
					// 查询到商品后，在前端展示到相应的位置中。
					console.log(products)
					$("#gouwuche").html("")
					for(var i = 0; i < products.length; i++) {
						$("#gouwuche").append("<div class='shop_nav' id=" + products[i].id + "></div>")
						$("#" + products[i].id).append("<span>" + "<input type='checkbox'/>" + products[i].attributes.img + "</span>")
						$("#" + products[i].id).append("<span>" + "<p>" + products[i].attributes.title + "</p>" + "<label>颜色:" + "<span>" + products[i].attributes.color + "</span>" + "</label>" + "</span>")
						$("#" + products[i].id).append("<span class='oneprice'>" + parseInt(products[i].attributes.price) + "</span>")
						$("#" + products[i].id).append("<span>" + "<i class='Hui-iconfont Hui-iconfont-jianhao del'></i>" + "<input type='text' size='1' class='number' value=" + products[i].attributes.num + " />" + "<i class='Hui-iconfont Hui-iconfont-add add'></i>" + "</span>")
						$("#" + products[i].id).append("<span class='price'>" + parseInt(products[i].attributes.price) * products[i].attributes.num + "</span>")
						$("#" + products[i].id).append("<span class='removeshop'>删除</span>")
					}
					cartAction()
				}).catch(function(error) {
					console.log(JSON.stringify(error));
				});
			}

			function getPageUrl() {
				var index = location.pathname.lastIndexOf("/") //获取当前页面
				var ret = location.pathname.substr(index + 1)
				return escape(ret)
			}

			function cartAction() {
				console.log($(".removeshop").length)
				$(".removeshop").each(function(i) {
						$(".removeshop").eq(i).click(function() {
							var todo = AV.Object.createWithoutData('Cart', $(this.parentNode).attr("id"));
							todo.destroy().then(function(success) {
								updateCart()
							}, function(error) {
								// 删除失败
							});
						}).mouseover(function() {
							$(this).css("cursor", "pointer");
						});
					}) //点击删除表内数据               
					//购物车上的减号
				$(".del").each(function(i) {
					$(".del").eq(i).click(function() {
						var num = parseInt($(this).next().val()); //确保数量是整型
						if(num == 1) {
							num = 1;
						} else {
							num--;
						}
						$(this).next().val(num);
						var danjia = parseInt(this.parentNode.parentNode.children[2].innerHTML)
						var total = danjia * num
						this.parentNode.parentNode.children[4].innerHTML = total
						var todo = AV.Object.createWithoutData('Cart', $(this.parentNode.parentNode).attr("id"));
						// 修改属性
						todo.set('num', num);
						// 保存到云端
						todo.save();
						count()
					})
				});

				//购物车上的加号
				$(".add").each(function(i) {
					$(".add").eq(i).click(function() {
						var num = parseInt(this.parentNode.children[1].value); //确保数量是整型
						if(num > 0) {
							num++;
							this.parentNode.children[1].value = num;
							var danjia = parseInt(this.parentNode.parentNode.children[2].innerHTML)
							var total = danjia * num
							this.parentNode.parentNode.children[4].innerHTML = total
							var todo = AV.Object.createWithoutData('Cart', $(this.parentNode.parentNode).attr("id"));
							// 修改属性
							todo.set('num', num);
							// 保存到云端
							todo.save();
							count()
						}
					})
				});
				//全选
				$(".quanxuan").click(function() {
					var ischecked = this.checked
					console.log($("#gouwuche input[type='checkbox']").length)
					$("#gouwuche input[type='checkbox']").each(function(i) {
						$("#gouwuche input[type='checkbox']")[i].checked = ischecked
					});
					console.log($("#gouwuche input[type='checkbox']")[1].checked)
					count()
				});

				//删除选中的商品
				$(".deleteChecked").click(function() {
					$(".shop_nav").each(function(i) {
						if($(".shop_nav").eq(i).find("input[type='checkbox']")[0].checked == true) {
							$(".shop_nav").eq(i).find(".removeshop").click()
						} else {

						}
					})
				})

				$("#gouwuche input[type='checkbox']").each(function(i) {
					$("#gouwuche input[type='checkbox']").eq(i).click(
						function() {
							count()
						}
					)
				})

				//计算
				function count() {
					var countnum = 0;
					var count=0;
					$("#gouwuche .shop_nav").each(function(i) {
						if($("#gouwuche .shop_nav").eq(i).find("input[type='checkbox']")[0].checked == true) {
							count++
							countnum += parseInt($("#gouwuche .shop_nav").eq(i).find(".price").html())
						} else {

						}
					})
					$("#total").html(countnum)
					$("#count").html(count)
				}
                 
			}

		</script>
		<!--<script src="js/shopping.js" type="text/javascript" charset="utf-8"></script>-->
	</body>

</html>